import React, {useEffect, useState,useRef} from 'react';
import {Button, message, Modal, Select, Space, Table} from "antd";
import Axios from "../../util/axios"
import ADDTabStone from "./ADDTabStone";

const { Option } = Select;
const { confirm } = Modal;
const TabStoneSet= (props) =>{
    const [dataSource,setdataSource] =useState([]);
    const columns = [
        {
            title: '序号',
            dataIndex: 'stoneId',
            key: 'stoneId'
        },
        {
            title: '石料编码',
            dataIndex: 'stoneCode',
            key: 'stoneCode'
        },
        {
            title: '石料名称',
            dataIndex: 'stoneName',
            key: 'stoneName'
        },
        {
            title: '单位',
            dataIndex: 'unit',
            key: 'unit'
        },
        {
            title: '石料颜色',
            dataIndex: 'stoneColor',
            key: 'stoneColor'
        },
        {
            title: '石料切工',
            dataIndex: 'stoneCutting',
            key: 'stoneCutting'
        },
        {
            title: '切工说明',
            dataIndex: 'cuttingInstructions',
            key: 'cuttingInstructions'
        },
        {
            title: '操作',
            align:'center',
            render: (item)=>{
                return(
                    <Space>
                        <Button size="small" type="primary"
                                onClick={()=>{editMethod(item)}}>编辑</Button>
                        <Button  size="small" type="danger"
                                 onClick={()=>{confirmMethod(item)}}>删除</Button>
                    </Space>
                )
            }
        }
    ];
    //页面显示
    const displayStone =() =>{
        Axios.get("/commedity").then((res) =>{
            setdataSource(res.data.data)
        });
    }
    var [options, setOptions] = useState();
    useEffect(() =>{
        displayStone();
        Axios.get("/selectClassfiy").then((res)=>{
            if (res){
                let selectArr =res.data.data.map((item,key) =>{
                    return (<Option key={key} value={item.id}>{item.classfiyName}</Option>
                    )
                })
                setOptions(selectArr)

            }
        })
    },[]);

    //删除
    const confirmMethod =(item) =>{
        confirm({
            title: '你想要删除吗?',
            content: '确定要删除这条数据吗?',
            onOk() {
                deleteMethod(item);
                message.success('已成功删除');
            },
            onCancel() {
                message.error('删除失败');
            },
        });
    }
    const deleteMethod =(item) =>{
        Axios.get("/deleteProductStone", {params:{stoneId:item.stoneId
            }}).then((res) =>{
            setdataSource([...dataSource,res.data.data])
            displayStone();
        }).catch(err =>console.log(err))
    }

    //修改
    const [current,setcurrent] =useState(null);
    const editMethod =(item)=>{
        //同步，不然刷新后就没了
        setTimeout(() =>{
            setisupdatevisible(true);
            updateForm.current.setFieldsValue(item)
        },0)
        setcurrent(item)
    }
    const [isupdatevisible,setisupdatevisible] =useState(false);
    const updateForm =useRef(null);
    const updateFormOk =() =>{
        updateForm.current.validateFields().then(value => {
            console.log(value);
            setisupdatevisible(false);
            setdataSource(dataSource.map((item) =>{
                if (item.stoneId===current.stoneId){
                    return {
                        ...item,
                        ...value
                    }
                }
                return item

            }))
            //        把更改的向后台发送过去，否则刷新页面之后没了
            Axios.post("/updateProductStone",{value})
        })
    }


    return (
        <div>
            <div>
                <ul className="selectStone">
                    <li>选择修改种类</li>
                    <li>
                   <Select defaultValue="种类" style={{ width: 120 }}

                   >
                       {options}
                   </Select>
                    </li>
                </ul>
                <Table
                    rowSelection={{
                        type: 'checkbox'
                    }}
                    dataSource={dataSource}
                    columns={columns}
                    pagination={{pageSize:3}}
                    scroll={{y:240}}
                    rowKey="stoneId"
                />
                <Modal
                    visible={isupdatevisible}
                    title="修改编码规则"
                    okText="确定"
                    cancelText="取消"
                    onCancel={() =>{
                        setisupdatevisible(false)
                    }}
                    onOk={()=>updateFormOk()}
                >
                    <ADDTabStone ref={updateForm} ></ADDTabStone>
                </Modal>
            </div>
        </div>
    );
}

export default TabStoneSet;